<template>
  <div>
    <a-button type="primary" size="small" @click="addBtnClick">
      添加
    </a-button>
    <br>
    <br>
    <w-cell
      v-for="v in homeLinks"
      :key="v._id"
      :icon="v.pic"
      :title="v.title"
      :describe="v.detail"
      :operation-width="100"
      :hover="false"
    >
      <a :href="v.link" target="_blank">{{ v.title }}</a>
      <template slot="option">
        <a-button type="primary" size="small" @click="editBtnClick(v)">
          编辑
        </a-button>&nbsp;
        <a-button type="danger" size="small" @click="removeBtnClick(v)">
          删除
        </a-button>
      </template>
    </w-cell>
    <w-add ref="WAdd" @reload="reload" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api, Admin } from '@/config/api'
import WCell from '@/components/global/cell'
import WAdd, { AddComType } from '@/components/admin/web/home-link/add'
import HomeLink from '~/models/homeLink'

@Component({
  name: 'AdminWebHomeLink',
  layout: 'admin',
  components: {
    WAdd,
    WCell
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Api.homeLink.all)
    return { homeLinks: data }
  },
  head () {
    return {
      title: '首页链接'
    }
  }
})
export default class AdminWebHomeLink extends Vue {
  homeLinks!: Array<HomeLink>;

  addBtnClick () {
    (this.$refs.WAdd as AddComType).show()
  }

  removeBtnClick (item: HomeLink) {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.homeLink.delete}${item._id}`)
    }, item.title).then(() => {
      this.reload()
    })
  }

  reload () {
    this.$wAxios
      .$get(Api.homeLink.all)
      .then((data) => {
        this.homeLinks = data
      })
      .catch(() => {})
  }

  editBtnClick (model: HomeLink) {
    (this.$refs.WAdd as AddComType).show(model)
  }
}
</script>

<style scoped></style>
